<template>
  <div>
    <el-row :gutter="20">
      <el-form ref="elForm" :model="formData" :rules="rules" size="small" label-width="111px">
        <el-col :span="13">
          <el-form-item label="优惠券名称" prop="couponName" style="margin-top: 30px">
            <el-input v-model="formData.couponName" placeholder="请输入优惠券名称" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label="优惠券类型" prop="couponType">
              <!--              <el-radio v-for="(item, index) in couponTypeOptions" :key="index" :label="item.value"-->
              <!--                        :disabled="item.disabled">{{item.label}}</el-radio>-->

            <el-radio label='1' v-model="formData.couponType">通用券</el-radio>
            <el-radio label='2' v-model="formData.couponType">商品券</el-radio>
            <el-radio label='3' v-model="formData.couponType">品类券</el-radio>
          </el-form-item>

          <el-form-item label="选择品类："  v-if="formData.couponType ==='3' ">
            <el-cascader   :props="props2" clearable class="selWidth"
                         :show-all-levels="false"/>
          </el-form-item>

          <el-form-item label="商品：" v-if="formData.couponType ===  '2' " >
            <el-button round type="primary"><i class="el-icon-camera"></i>点击选择商品</el-button>
          </el-form-item>

        </el-col>
        <el-col :span="13">
          <el-form-item label="优惠券面值" prop="couponValue">
            <el-input-number v-model="formData.couponValue" placeholder="优惠券面值"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label="使用门槛" prop="useNeed">
            <el-radio-group v-model="formData.useNeed" size="medium">
              <el-radio v-for="(item, index) in useNeedOptions" :key="index" :label="item.value"
                        :disabled="item.disabled">{{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label="使用有效期" prop="youxiaoqi">
            <el-radio-group v-model="formData.youxiaoqi" size="medium">
              <el-radio v-for="(item, index) in youxiaoqiOptions" :key="index" :label="item.value"
                        :disabled="item.disabled">{{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="使用有效期" prop="field110">
            <el-input-number v-model="formData.field110" placeholder="天数"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="领取是否限时" prop="field112">
            <el-radio-group v-model="formData.field112" size="medium">
              <el-radio v-for="(item, index) in field112Options" :key="index" :label="item.value"
                        :disabled="item.disabled">{{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="领取方式" prop="couponGetWay">
            <el-radio-group v-model="formData.couponGetWay" size="medium">
              <el-radio v-for="(item, index) in couponGetWayOptions" :key="index" :label="item.value"
                        :disabled="item.disabled">{{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="是否限量" prop="couponPublishNum">
            <el-radio-group v-model="formData.couponPublishNum" size="medium">
              <el-radio v-for="(item, index) in couponPublishNumOptions" :key="index" :label="item.value"
                        :disabled="item.disabled">{{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="状态" prop="couponIsOpen">
            <el-radio-group v-model="formData.couponIsOpen" size="medium">
              <el-radio v-for="(item, index) in couponIsOpenOptions" :key="index" :label="item.value"
                        :disabled="item.disabled">{{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>



  </div>
</template>
<script>
import {Properties as ruleForm} from "svg-sprite-loader/examples/custom-runtime-generator/build/main";

export default {
  components: {},
  props: [],
  data() {
    return {

      // 我写的代码 从这开始
      radio: '1',


      formData: {
        couponName: undefined,
        couponType: '1',
        couponValue: undefined,
        useNeed: undefined,
        youxiaoqi: undefined,
        field110: undefined,
        field112: undefined,
        couponGetWay: undefined,
        couponPublishNum: undefined,
        couponIsOpen: undefined,
      },
      rules: {
        couponName: [{
          required: true,
          message: '请输入优惠券名称',
          trigger: 'blur'
        }],
        couponType: [{
          required: true,
          message: '优惠券类型不能为空',
          trigger: 'change'
        }],
        couponValue: [{
          required: true,
          message: '优惠券面值',
          trigger: 'blur'
        }],
        useNeed: [{
          required: true,
          message: '使用门槛不能为空',
          trigger: 'change'
        }],
        youxiaoqi: [{
          required: true,
          message: '使用有效期不能为空',
          trigger: 'change'
        }],
        field110: [{
          required: true,
          message: '天数',
          trigger: 'blur'
        }],
        field112: [{
          required: true,
          message: '领取是否限时不能为空',
          trigger: 'change'
        }],
        couponGetWay: [{
          required: true,
          message: '领取方式不能为空',
          trigger: 'change'
        }],
        couponPublishNum: [{
          required: true,
          message: '是否限量不能为空',
          trigger: 'change'
        }],
        couponIsOpen: [{
          required: true,
          message: '状态不能为空',
          trigger: 'change'
        }],
      },
      couponTypeOptions: [{
        "label": "通用券",
        "value": "通用券"
      }, {
        "label": "商品券",
        "value": "商品券"
      }, {
        "label": "品类券",
        "value": "品类券"
      }],
      useNeedOptions: [{
        "label": "有门槛",
        "value": 1
      }, {
        "label": "无门槛",
        "value": 2
      }],
      youxiaoqiOptions: [{
        "label": "天数",
        "value": 1
      }, {
        "label": "时间段",
        "value": 2
      }],
      field112Options: [{
        "label": "限时",
        "value": 1
      }, {
        "label": "不限时",
        "value": 2
      }],
      couponGetWayOptions: [{
        "label": "手动领取",
        "value": 1
      }, {
        "label": "新人券",
        "value": 2
      }, {
        "label": "赠送券",
        "value": 3
      }],
      couponPublishNumOptions: [{
        "label": "限量",
        "value": 1
      }, {
        "label": "不限量",
        "value": 2
      }],
      couponIsOpenOptions: [{
        "label": "开启",
        "value": 1
      }, {
        "label": "关闭",
        "value": 0
      }],
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    ruleForm() {
      return ruleForm
    },
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
  }
}

</script>
<style>
</style>
